<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>艾泽拉斯传奇 - 魔兽世界风格游戏</title>
    <meta name="description" content="探索艾泽拉斯大陆，加入联盟与部落的史诗战争，体验魔兽世界风格的奇幻冒险。">
    <!-- 引入外部资源 -->
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.8/dist/chart.umd.min.js"></script>
    
    <!-- 配置Tailwind自定义主题 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        // 魔兽世界风格配色
                        primary: '#C69B6D', // 青铜色 - 主色调
                        secondary: '#0A2342', // 深蓝色 - 辅助色
                        accent: '#A8323E', // 红色 - 强调色
                        dark: '#1A1A1A', // 深色背景
                        light: '#F5F0E8', // 浅色文本
                        'alliance': '#0066CC', // 联盟蓝
                        'horde': '#CC0000',   // 部落红
                    },
                    fontFamily: {
                        fantasy: ['Trajan Pro', 'Palatino', 'serif'],
                        body: ['Arial', 'Helvetica', 'sans-serif']
                    },
                    backgroundImage: {
                        'wow-pattern': "url('https://picsum.photos/id/1015/1920/1080')",
                    }
                }
            }
        }
    </script>
    
    <!-- 自定义工具类 -->
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .text-shadow {
                text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
            }
            .text-shadow-lg {
                text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.9);
            }
            .bg-blur {
                backdrop-filter: blur(8px);
            }
            .scrollbar-hide::-webkit-scrollbar {
                display: none;
            }
            .ornament-border {
                border-image: url('https://picsum.photos/id/175/200/200') 30 stretch;
            }
        }
    </style>
    
    <style>
        /* 全局样式 */
        body {
            background-color: #0F0F1A;
            color: #F5F0E8;
            background-image: 
                url('https://picsum.photos/id/1015/1920/1080'),
                linear-gradient(rgba(15, 15, 26, 0.9), rgba(15, 15, 26, 0.95));
            background-blend-mode: overlay;
            background-attachment: fixed;
            background-size: cover;
            background-position: center;
        }
        
        /* 字体引入 */
        @font-face {
            font-family: 'Trajan Pro';
            src: url('https://fonts.cdnfonts.com/css/trajan-pro-3') format('woff');
            font-weight: normal;
            font-style: normal;
        }
        
        /* 自定义动画 */
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        .animate-fade-in {
            animation: fadeIn 0.8s ease forwards;
        }
        
        .delay-100 { animation-delay: 0.1s; }
        .delay-200 { animation-delay: 0.2s; }
        .delay-300 { animation-delay: 0.3s; }
        .delay-400 { animation-delay: 0.4s; }
        .delay-500 { animation-delay: 0.5s; }
        
        /* 滚动动画 */
        .reveal {
            opacity: 0;
            transform: translateY(30px);
            transition: all 0.8s ease;
        }
        
        .reveal.active {
            opacity: 1;
            transform: translateY(0);
        }
        
        /* 按钮悬停效果 */
        .btn-wow:hover {
            transform: translateY(-3px);
            box-shadow: 0 10px 25px -5px rgba(168, 50, 62, 0.4);
        }
        
        /* 角色卡片效果 */
        .character-card {
            transition: all 0.5s ease;
        }
        
        .character-card:hover {
            transform: translateY(-10px) scale(1.02);
        }
        
        .character-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.8) 100%);
            z-index: 1;
            opacity: 0.7;
            transition: opacity 0.5s ease;
        }
        
        .character-card:hover::before {
            opacity: 0.9;
        }
    </style>
</head>

<body class="font-body">
    <!-- 导航栏 -->
    <header id="navbar" class="fixed w-full z-50 transition-all duration-300">
        <div class="bg-dark/80 bg-blur border-b border-primary/30">
            <div class="container mx-auto px-4 py-3 flex justify-between items-center">
                <!-- Logo -->
                <a href="#" class="flex items-center space-x-2">
                    <div class="w-10 h-10 bg-primary rounded-full flex items-center justify-center">
                        <i class="fa fa-shield text-dark text-xl"></i>
                    </div>
                    <span class="font-fantasy text-2xl text-primary">艾泽拉斯传奇</span>
                </a>
                
                <!-- 桌面导航 -->
                <nav class="hidden md:flex items-center space-x-8">
                    <a href="#classes" class="text-light hover:text-primary transition-colors font-fantasy">职业</a>
                    <a href="#factions" class="text-light hover:text-primary transition-colors font-fantasy">阵营</a>
                    <a href="#expansions" class="text-light hover:text-primary transition-colors font-fantasy">资料片</a>
                    <a href="#media" class="text-light hover:text-primary transition-colors font-fantasy">媒体</a>
                    <a href="#news" class="text-light hover:text-primary transition-colors font-fantasy">新闻</a>
                    <a href="#download" class="bg-accent hover:bg-accent/80 text-light px-6 py-2 rounded-sm transition-all btn-wow font-fantasy">
                        开始游戏
                    </a>
                </nav>
                
                <!-- 移动端菜单按钮 -->
                <button id="menu-toggle" class="md:hidden text-light text-2xl">
                    <i class="fa fa-bars"></i>
                </button>
            </div>
        </div>
        
        <!-- 移动端导航菜单 -->
        <div id="mobile-menu" class="hidden md:hidden bg-dark/95 bg-blur border-b border-primary/30">
            <div class="container mx-auto px-4 py-3 flex flex-col space-y-4">
                <a href="#classes" class="text-light hover:text-primary transition-colors py-2 border-b border-primary/10 font-fantasy">职业</a>
                <a href="#factions" class="text-light hover:text-primary transition-colors py-2 border-b border-primary/10 font-fantasy">阵营</a>
                <a href="#expansions" class="text-light hover:text-primary transition-colors py-2 border-b border-primary/10 font-fantasy">资料片</a>
                <a href="#media" class="text-light hover:text-primary transition-colors py-2 border-b border-primary/10 font-fantasy">媒体</a>
                <a href="#news" class="text-light hover:text-primary transition-colors py-2 border-b border-primary/10 font-fantasy">新闻</a>
                <a href="#download" class="bg-accent hover:bg-accent/80 text-light px-6 py-3 rounded-sm text-center transition-all btn-wow font-fantasy">
                    开始游戏
                </a>
            </div>
        </div>
    </header>

    <main>
        <!-- 英雄区 -->
        <section class="relative h-screen flex items-center justify-center overflow-hidden">
            <!-- 背景视频/图片 -->
            <div class="absolute inset-0 z-0">
                <img src="https://picsum.photos/id/1035/1920/1080" alt="魔兽世界风格的奇幻风景" class="w-full h-full object-cover">
                <div class="absolute inset-0 bg-gradient-to-b from-dark/60 via-dark/40 to-dark"></div>
            </div>
            
            <!-- 内容 -->
            <div class="container mx-auto px-4 z-10 text-center">
                <h1 class="font-fantasy text-[clamp(2.5rem,8vw,5rem)] font-bold text-light text-shadow-lg mb-6 animate-fade-in leading-tight">
                    艾泽拉斯的<br>英雄传说
                </h1>
                <p class="text-[clamp(1rem,3vw,1.5rem)] text-light/90 text-shadow max-w-3xl mx-auto mb-10 animate-fade-in delay-200">
                    加入联盟与部落的永恒战争，探索广阔的奇幻大陆，书写属于你的传奇史诗
                </p>
                <div class="flex flex-col sm:flex-row justify-center gap-4 animate-fade-in delay-300">
                    <a href="#download" class="bg-accent hover:bg-accent/80 text-light px-8 py-4 rounded-sm text-lg transition-all btn-wow font-fantasy">
                        立即开始
                    </a>
                    <a href="#expansions" class="bg-transparent border-2 border-primary text-primary hover:bg-primary/10 px-8 py-4 rounded-sm text-lg transition-all btn-wow font-fantasy">
                        探索世界
                    </a>
                </div>
                
                <!-- 向下滚动指示 -->
                <div class="absolute bottom-10 left-1/2 transform -translate-x-1/2 animate-bounce">
                    <a href="#classes" class="text-light/70 hover:text-primary transition-colors">
                        <i class="fa fa-chevron-down text-2xl"></i>
                    </a>
                </div>
            </div>
        </section>
        
        <!-- 职业展示 -->
        <section id="classes" class="py-20 bg-dark/80">
            <div class="container mx-auto px-4">
                <div class="text-center mb-16 reveal">
                    <h2 class="font-fantasy text-[clamp(1.8rem,5vw,3rem)] text-primary mb-4">选择你的职业</h2>
                    <p class="text-light/80 max-w-2xl mx-auto text-lg">
                        每个职业都拥有独特的技能与战斗风格，选择最适合你的英雄之路
                    </p>
                </div>
                
                <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
                    <!-- 战士 -->
                    <div class="character-card relative rounded-sm overflow-hidden h-80 reveal">
                        <img src="https://picsum.photos/id/1076/600/800" alt="战士职业" class="w-full h-full object-cover">
                        <div class="absolute bottom-0 left-0 w-full p-6 z-10">
                            <div class="flex items-center mb-2">
                                <i class="fa fa-shield text-primary mr-2"></i>
                                <h3 class="font-fantasy text-2xl text-light text-shadow">战士</h3>
                            </div>
                            <p class="text-light/90 text-shadow">无畏的近战勇士，精通各种武器与防御技巧</p>
                        </div>
                    </div>
                    
                    <!-- 法师 -->
                    <div class="character-card relative rounded-sm overflow-hidden h-80 reveal delay-100">
                        <img src="https://picsum.photos/id/1074/600/800" alt="法师职业" class="w-full h-full object-cover">
                        <div class="absolute bottom-0 left-0 w-full p-6 z-10">
                            <div class="flex items-center mb-2">
                                <i class="fa fa-bolt text-primary mr-2"></i>
                                <h3 class="font-fantasy text-2xl text-light text-shadow">法师</h3>
                            </div>
                            <p class="text-light/90 text-shadow">掌控元素力量的施法者，能释放毁灭性的魔法</p>
                        </div>
                    </div>
                    
                    <!-- 牧师 -->
                    <div class="character-card relative rounded-sm overflow-hidden h-80 reveal delay-200">
                        <img src="https://picsum.photos/id/1077/600/800" alt="牧师职业" class="w-full h-full object-cover">
                        <div class="absolute bottom-0 left-0 w-full p-6 z-10">
                            <div class="flex items-center mb-2">
                                <i class="fa fa-heart text-primary mr-2"></i>
                                <h3 class="font-fantasy text-2xl text-light text-shadow">牧师</h3>
                            </div>
                            <p class="text-light/90 text-shadow">神圣能量的使者，擅长治疗与暗影魔法</p>
                        </div>
                    </div>
                    
                    <!-- 猎人 -->
                    <div class="character-card relative rounded-sm overflow-hidden h-80 reveal delay-300">
                        <img src="https://picsum.photos/id/1071/600/800" alt="猎人职业" class="w-full h-full object-cover">
                        <div class="absolute bottom-0 left-0 w-full p-6 z-10">
                            <div class="flex items-center mb-2">
                                <i class="fa fa-bow text-primary mr-2"></i>
                                <h3 class="font-fantasy text-2xl text-light text-shadow">猎人</h3>
                            </div>
                            <p class="text-light/90 text-shadow">精通远程武器与野兽伙伴的生存大师</p>
                        </div>
                    </div>
                </div>
                
                <div class="text-center mt-12 reveal">
                    <a href="#" class="inline-flex items-center text-primary hover:text-primary/80 transition-colors font-fantasy">
                        查看全部职业 <i class="fa fa-arrow-right ml-2"></i>
                    </a>
                </div>
            </div>
        </section>
        
        <!-- 阵营选择 -->
        <section id="factions" class="py-20 bg-gradient-to-b from-dark to-dark/90">
            <div class="container mx-auto px-4">
                <div class="text-center mb-16 reveal">
                    <h2 class="font-fantasy text-[clamp(1.8rem,5vw,3rem)] text-primary mb-4">选择你的阵营</h2>
                    <p class="text-light/80 max-w-2xl mx-auto text-lg">
                        联盟与部落的冲突席卷整个艾泽拉斯，你将为哪个阵营而战？
                    </p>
                </div>
                
                <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 max-w-6xl mx-auto">
                    <!-- 联盟 -->
                    <div class="relative rounded-sm overflow-hidden group reveal">
                        <img src="https://picsum.photos/id/1039/800/500" alt="联盟阵营" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110">
                        <div class="absolute inset-0 bg-gradient-to-t from-dark via-dark/60 to-transparent"></div>
                        <div class="absolute bottom-0 left-0 w-full p-8 z-10">
                            <div class="flex items-center mb-4">
                                <div class="w-12 h-12 bg-alliance rounded-full flex items-center justify-center mr-4">
                                    <i class="fa fa-shield text-white text-xl"></i>
                                </div>
                                <h3 class="font-fantasy text-3xl text-light text-shadow">联盟</h3>
                            </div>
                            <p class="text-light/90 text-shadow mb-6 max-w-lg">
                                由人类、矮人、精灵等种族组成的高贵联盟，坚守正义与荣耀的信念，为保护艾泽拉斯而战。
                            </p>
                            <a href="#" class="inline-block bg-alliance/80 hover:bg-alliance text-white px-6 py-3 rounded-sm transition-all btn-wow font-fantasy">
                                加入联盟
                            </a>
                        </div>
                    </div>
                    
                    <!-- 部落 -->
                    <div class="relative rounded-sm overflow-hidden group reveal delay-200">
                        <img src="https://picsum.photos/id/1040/800/500" alt="部落阵营" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110">
                        <div class="absolute inset-0 bg-gradient-to-t from-dark via-dark/60 to-transparent"></div>
                        <div class="absolute bottom-0 left-0 w-full p-8 z-10">
                            <div class="flex items-center mb-4">
                                <div class="w-12 h-12 bg-horde rounded-full flex items-center justify-center mr-4">
                                    <i class="fa fa-axe text-white text-xl"></i>
                                </div>
                                <h3 class="font-fantasy text-3xl text-light text-shadow">部落</h3>
                            </div>
                            <p class="text-light/90 text-shadow mb-6 max-w-lg">
                                由兽人、巨魔、亡灵等种族组成的部落，在挣扎求存中团结一心，为自己的生存与荣耀而战。
                            </p>
                            <a href="#" class="inline-block bg-horde/80 hover:bg-horde text-white px-6 py-3 rounded-sm transition-all btn-wow font-fantasy">
                                加入部落
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        
        <!-- 资料片展示 -->
        <section id="expansions" class="py-20 bg-dark/80">
            <div class="container mx-auto px-4">
                <div class="text-center mb-16 reveal">
                    <h2 class="font-fantasy text-[clamp(1.8rem,5vw,3rem)] text-primary mb-4">资料片</h2>
                    <p class="text-light/80 max-w-2xl mx-auto text-lg">
                        每一部资料片都带来全新的大陆、任务与挑战，拓展艾泽拉斯的传奇故事
                    </p>
                </div>
                
                <div class="relative">
                    <!-- 时间轴 -->
                    <div class="hidden md:block absolute left-1/2 top-0 bottom-0 w-1 bg-primary/30 transform -translate-x-1/2"></div>
                    
                    <!-- 资料片列表 -->
                    <div class="space-y-20">
                        <!-- 最新资料片 -->
                        <div class="flex flex-col md:flex-row items-center reveal">
                            <div class="md:w-1/2 md:pr-16 md:text-right order-2 md:order-1 mt-8 md:mt-0">
                                <span class="text-primary/80 font-fantasy">2023</span>
                                <h3 class="font-fantasy text-2xl md:text-3xl text-light mb-4">暗影国度</h3>
                                <p class="text-light/80 mb-6">
                                    穿越生死边界，探索死后世界的奥秘。与暗影界的势力结盟，拯救艾泽拉斯的灵魂免于永恒的折磨。
                                </p>
                                <a href="#" class="inline-flex items-center md:justify-end text-primary hover:text-primary/80 transition-colors font-fantasy">
                                    了解更多 <i class="fa fa-arrow-right ml-2"></i>
                                </a>
                            </div>
                            
                            <div class="md:w-12 relative order-1 md:order-2">
                                <div class="w-8 h-8 bg-accent rounded-full absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 z-10"></div>
                            </div>
                            
                            <div class="md:w-1/2 md:pl-16 order-3">
                                <div class="rounded-sm overflow-hidden shadow-xl transform transition-transform hover:scale-[1.02]">
                                    <img src="https://picsum.photos/id/1036/600/400" alt="暗影国度资料片" class="w-full h-auto">
                                </div>
                            </div>
                        </div>
                        
                        <!-- 资料片2 -->
                        <div class="flex flex-col md:flex-row items-center reveal">
                            <div class="md:w-1/2 md:pr-16 order-2">
                                <div class="rounded-sm overflow-hidden shadow-xl transform transition-transform hover:scale-[1.02]">
                                    <img src="https://picsum.photos/id/1037/600/400" alt="争霸艾泽拉斯资料片" class="w-full h-auto">
                                </div>
                            </div>
                            
                            <div class="md:w-12 relative order-1">
                                <div class="w-8 h-8 bg-accent rounded-full absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 z-10"></div>
                            </div>
                            
                            <div class="md:w-1/2 md:pl-16 order-3 mt-8 md:mt-0">
                                <span class="text-primary/80 font-fantasy">2020</span>
                                <h3 class="font-fantasy text-2xl md:text-3xl text-light mb-4">争霸艾泽拉斯</h3>
                                <p class="text-light/80 mb-6">
                                    联盟与部落的战争全面爆发，探索库尔提拉斯和赞达拉的神秘岛屿，揭开古老的秘密与力量。
                                </p>
                                <a href="#" class="inline-flex items-center text-primary hover:text-primary/80 transition-colors font-fantasy">
                                    了解更多 <i class="fa fa-arrow-right ml-2"></i>
                                </a>
                            </div>
                        </div>
                        
                        <!-- 资料片3 -->
                        <div class="flex flex-col md:flex-row items-center reveal">
                            <div class="md:w-1/2 md:pr-16 md:text-right order-2 md:order-1 mt-8 md:mt-0">
                                <span class="text-primary/80 font-fantasy">2018</span>
                                <h3 class="font-fantasy text-2xl md:text-3xl text-light mb-4"> Legion</h3>
                                <p class="text-light/80 mb-6">
                                    燃烧军团再次入侵，玩家将作为英雄获得神器，组建军团反击燃烧军团的入侵，保卫艾泽拉斯。
                                </p>
                                <a href="#" class="inline-flex items-center md:justify-end text-primary hover:text-primary/80 transition-colors font-fantasy">
                                    了解更多 <i class="fa fa-arrow-right ml-2"></i>
                                </a>
                            </div>
                            
                            <div class="md:w-12 relative order-1 md:order-2">
                                <div class="w-8 h-8 bg-accent rounded-full absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 z-10"></div>
                            </div>
                            
                            <div class="md:w-1/2 md:pl-16 order-3">
                                <div class="rounded-sm overflow-hidden shadow-xl transform transition-transform hover:scale-[1.02]">
                                    <img src="https://picsum.photos/id/1038/600/400" alt="Legion资料片" class="w-full h-auto">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        
        <!-- 媒体与截图 -->
        <section id="media" class="py-20 bg-gradient-to-b from-dark/90 to-dark">
            <div class="container mx-auto px-4">
                <div class="text-center mb-16 reveal">
                    <h2 class="font-fantasy text-[clamp(1.8rem,5vw,3rem)] text-primary mb-4">游戏媒体</h2>
                    <p class="text-light/80 max-w-2xl mx-auto text-lg">
                        欣赏艾泽拉斯大陆的壮丽景色与激烈战斗场面
                    </p>
                </div>
                
                <!-- 预告片 -->
                <div class="mb-20 reveal">
                    <div class="relative rounded-sm overflow-hidden max-w-5xl mx-auto group cursor-pointer">
                        <img src="https://picsum.photos/id/1047/1280/720" alt="暗影国度预告片" class="w-full h-auto">
                        <div class="absolute inset-0 bg-dark/40 flex items-center justify-center opacity-100 group-hover:opacity-80 transition-opacity">
                            <div class="w-20 h-20 bg-accent/90 rounded-full flex items-center justify-center transform transition-transform group-hover:scale-110">
                                <i class="fa fa-play text-white text-3xl ml-2"></i>
                            </div>
                        </div>
                        <div class="absolute bottom-4 right-4 bg-dark/80 text-light px-3 py-1 rounded text-sm">
                            3:45
                        </div>
                    </div>
                    <div class="text-center mt-6">
                        <h3 class="font-fantasy text-2xl text-light mb-2">暗影国度 - 全新资料片预告片</h3>
                        <p class="text-light/70">探索死后世界的神秘领域</p>
                    </div>
                </div>
                
                <!-- 截图网格 -->
                <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 reveal">
                    <div class="rounded-sm overflow-hidden group cursor-pointer">
                        <img src="https://picsum.photos/id/1043/600/400" alt="游戏截图1" class="w-full h-64 object-cover transition-transform duration-500 group-hover:scale-110">
                    </div>
                    <div class="rounded-sm overflow-hidden group cursor-pointer">
                        <img src="https://picsum.photos/id/1044/600/400" alt="游戏截图2" class="w-full h-64 object-cover transition-transform duration-500 group-hover:scale-110">
                    </div>
                    <div class="rounded-sm overflow-hidden group cursor-pointer">
                        <img src="https://picsum.photos/id/1045/600/400" alt="游戏截图3" class="w-full h-64 object-cover transition-transform duration-500 group-hover:scale-110">
                    </div>
                    <div class="rounded-sm overflow-hidden group cursor-pointer">
                        <img src="https://picsum.photos/id/1046/600/400" alt="游戏截图4" class="w-full h-64 object-cover transition-transform duration-500 group-hover:scale-110">
                    </div>
                    <div class="rounded-sm overflow-hidden group cursor-pointer">
                        <img src="https://picsum.photos/id/1048/600/400" alt="游戏截图5" class="w-full h-64 object-cover transition-transform duration-500 group-hover:scale-110">
                    </div>
                    <div class="rounded-sm overflow-hidden group cursor-pointer">
                        <img src="https://picsum.photos/id/1049/600/400" alt="游戏截图6" class="w-full h-64 object-cover transition-transform duration-500 group-hover:scale-110">
                    </div>
                    <div class="rounded-sm overflow-hidden group cursor-pointer">
                        <img src="https://picsum.photos/id/1050/600/400" alt="游戏截图7" class="w-full h-64 object-cover transition-transform duration-500 group-hover:scale-110">
                    </div>
                    <div class="rounded-sm overflow-hidden group cursor-pointer">
                        <img src="https://picsum.photos/id/1051/600/400" alt="游戏截图8" class="w-full h-64 object-cover transition-transform duration-500 group-hover:scale-110">
                    </div>
                </div>
                
                <div class="text-center mt-12 reveal">
                    <a href="#" class="inline-flex items-center text-primary hover:text-primary/80 transition-colors font-fantasy">
                        查看更多媒体内容 <i class="fa fa-arrow-right ml-2"></i>
                    </a>
                </div>
            </div>
        </section>
        
        <!-- 新闻与更新 -->
        <section id="news" class="py-20 bg-dark/80">
            <div class="container mx-auto px-4">
                <div class="text-center mb-16 reveal">
                    <h2 class="font-fantasy text-[clamp(1.8rem,5vw,3rem)] text-primary mb-4">最新新闻</h2>
                    <p class="text-light/80 max-w-2xl mx-auto text-lg">
                        了解游戏最新更新、活动与公告
                    </p>
                </div>
                
                <div class="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-6xl mx-auto">
                    <!-- 新闻1 -->
                    <article class="bg-dark/60 border border-primary/20 rounded-sm overflow-hidden hover:border-primary/50 transition-colors reveal">
                        <div class="relative h-48 overflow-hidden">
                            <img src="https://picsum.photos/id/1053/600/400" alt="暗影国度更新" class="w-full h-full object-cover transition-transform duration-500 hover:scale-110">
                            <div class="absolute top-4 left-4 bg-accent text-white text-sm px-3 py-1 rounded-sm">
                                更新公告
                            </div>
                        </div>
                        <div class="p-6">
                            <time datetime="2023-06-15" class="text-light/60 text-sm">2023年6月15日</time>
                            <h3 class="font-fantasy text-xl text-light mt-2 mb-3 hover:text-primary transition-colors">
                                <a href="#">暗影国度1.5版本更新内容</a>
                            </h3>
                            <p class="text-light/70 mb-4">
                                全新团队副本"纳斯利亚堡"即将开放，新增阵营战役与世界任务，还有全新的传说装备等你来获取。
                            </p>
                            <a href="#" class="inline-flex items-center text-primary hover:text-primary/80 transition-colors text-sm font-fantasy">
                                阅读更多 <i class="fa fa-angle-right ml-1"></i>
                            </a>
                        </div>
                    </article>
                    
                    <!-- 新闻2 -->
                    <article class="bg-dark/60 border border-primary/20 rounded-sm overflow-hidden hover:border-primary/50 transition-colors reveal delay-100">
                        <div class="relative h-48 overflow-hidden">
                            <img src="https://picsum.photos/id/1054/600/400" alt="竞技场赛季" class="w-full h-full object-cover transition-transform duration-500 hover:scale-110">
                            <div class="absolute top-4 left-4 bg-alliance text-white text-sm px-3 py-1 rounded-sm">
                                活动公告
                            </div>
                        </div>
                        <div class="p-6">
                            <time datetime="2023-06-10" class="text-light/60 text-sm">2023年6月10日</time>
                            <h3 class="font-fantasy text-xl text-light mt-2 mb-3 hover:text-primary transition-colors">
                                <a href="#">第3赛季竞技场与评级战场开启</a>
                            </h3>
                            <p class="text-light/70 mb-4">
                                全新竞技场赛季与评级战场正式开启，参与即可获得专属装备与坐骑，展示你的PvP实力。
                            </p>
                            <a href="#" class="inline-flex items-center text-primary hover:text-primary/80 transition-colors text-sm font-fantasy">
                                阅读更多 <i class="fa fa-angle-right ml-1"></i>
                            </a>
                        </div>
                    </article>
                    
                    <!-- 新闻3 -->
                    <article class="bg-dark/60 border border-primary/20 rounded-sm overflow-hidden hover:border-primary/50 transition-colors reveal delay-200">
                        <div class="relative h-48 overflow-hidden">
                            <img src="https://picsum.photos/id/1055/600/400" alt="开发者访谈" class="w-full h-full object-cover transition-transform duration-500 hover:scale-110">
                            <div class="absolute top-4 left-4 bg-horde text-white text-sm px-3 py-1 rounded-sm">
                                开发者访谈
                            </div>
                        </div>
                        <div class="p-6">
                            <time datetime="2023-06-05" class="text-light/60 text-sm">2023年6月5日</time>
                            <h3 class="font-fantasy text-xl text-light mt-2 mb-3 hover:text-primary transition-colors">
                                <a href="#">开发者谈暗影国度未来内容规划</a>
                            </h3>
                            <p class="text-light/70 mb-4">
                                游戏总监分享了暗影国度后续更新计划，包括新区域、职业平衡调整以及玩家社区反馈的改进措施。
                            </p>
                            <a href="#" class="inline-flex items-center text-primary hover:text-primary/80 transition-colors text-sm font-fantasy">
                                阅读更多 <i class="fa fa-angle-right ml-1"></i>
                            </a>
                        </div>
                    </article>
                </div>
                
                <div class="text-center mt-12 reveal">
                    <a href="#" class="inline-flex items-center text-primary hover:text-primary/80 transition-colors font-fantasy">
                        查看所有新闻 <i class="fa fa-arrow-right ml-2"></i>
                    </a>
                </div>
            </div>
        </section>
        
        <!-- 下载/开始游戏 -->
        <section id="download" class="py-24 bg-gradient-to-b from-dark to-dark/90 relative overflow-hidden">
            <div class="absolute inset-0 z-0 opacity-20">
                <img src="https://picsum.photos/id/1059/1920/1080" alt="背景图案" class="w-full h-full object-cover">
            </div>
            
            <div class="container mx-auto px-4 relative z-10">
                <div class="max-w-4xl mx-auto bg-dark/80 border border-primary/30 rounded-sm p-8 md:p-12 shadow-2xl reveal">
                    <div class="text-center mb-10">
                        <h2 class="font-fantasy text-[clamp(1.8rem,5vw,3rem)] text-primary mb-4">开始你的冒险</h2>
                        <p class="text-light/80 max-w-2xl mx-auto text-lg">
                            下载游戏客户端，加入数百万玩家的行列，在艾泽拉斯大陆书写你的传奇
                        </p>
                    </div>
                    
                    <div class="flex flex-col md:flex-row gap-6 mb-10">
                        <div class="flex-1 bg-dark/60 border border-primary/20 rounded-sm p-6 text-center hover:border-primary/50 transition-colors">
                            <div class="w-16 h-16 bg-primary/20 rounded-full flex items-center justify-center mx-auto mb-4">
                                <i class="fa fa-windows text-primary text-2xl"></i>
                            </div>
                            <h3 class="font-fantasy text-xl text-light mb-2">Windows 版</h3>
                            <p class="text-light/60 text-sm mb-4">支持 Windows 10/11 (64位)</p>
                            <a href="#" class="inline-block bg-accent hover:bg-accent/80 text-white px-6 py-3 rounded-sm transition-all btn-wow font-fantasy">
                                下载客户端
                            </a>
                        </div>
                        
                        <div class="flex-1 bg-dark/60 border border-primary/20 rounded-sm p-6 text-center hover:border-primary/50 transition-colors">
                            <div class="w-16 h-16 bg-primary/20 rounded-full flex items-center justify-center mx-auto mb-4">
                                <i class="fa fa-apple text-primary text-2xl"></i>
                            </div>
                            <h3 class="font-fantasy text-xl text-light mb-2">macOS 版</h3>
                            <p class="text-light/60 text-sm mb-4">支持 macOS 10.15 及以上</p>
                            <a href="#" class="inline-block bg-accent hover:bg-accent/80 text-white px-6 py-3 rounded-sm transition-all btn-wow font-fantasy">
                                下载客户端
                            </a>
                        </div>
                        
                        <div class="flex-1 bg-dark/60 border border-primary/20 rounded-sm p-6 text-center hover:border-primary/50 transition-colors">
                            <div class="w-16 h-16 bg-primary/20 rounded-full flex items-center justify-center mx-auto mb-4">
                                <i class="fa fa-mobile text-primary text-3xl"></i>
                            </div>
                            <h3 class="font-fantasy text-xl text-light mb-2">移动版</h3>
                            <p class="text-light/60 text-sm mb-4">iOS 与 Android 兼容</p>
                            <a href="#" class="inline-block bg-accent hover:bg-accent/80 text-white px-6 py-3 rounded-sm transition-all btn-wow font-fantasy">
                                预注册
                            </a>
                        </div>
                    </div>
                    
                    <div class="text-center text-light/60 text-sm">
                        <p>游戏客户端大小: 约 85 GB | 需互联网连接 | 年龄分级: 12+</p>
                    </div>
                </div>
            </div>
        </section>
    </main>
    
    <!-- 页脚 -->
    <footer class="bg-dark border-t border-primary/30 pt-16 pb-8">
        <div class="container mx-auto px-4">
            <div class="grid grid-cols-1 md:grid-cols-4 gap-10 mb-16">
                <!-- 关于游戏 -->
                <div>
                    <h4 class="font-fantasy text-primary text-xl mb-6">艾泽拉斯传奇</h4>
                    <p class="text-light/70 mb-6">
                        一款宏大的多人在线角色扮演游戏，带你进入一个充满魔法、冒险与战争的奇幻世界。
                    </p>
                    <div class="flex space-x-4">
                        <a href="#" class="text-light/60 hover:text-primary transition-colors text-xl">
                            <i class="fa fa-facebook"></i>
                        </a>
                        <a href="#" class="text-light/60 hover:text-primary transition-colors text-xl">
                            <i class="fa fa-twitter"></i>
                        </a>
                        <a href="#" class="text-light/60 hover:text-primary transition-colors text-xl">
                            <i class="fa fa-instagram"></i>
                        </a>
                        <a href="#" class="text-light/60 hover:text-primary transition-colors text-xl">
                            <i class="fa fa-youtube-play"></i>
                        </a>
                        <a href="#" class="text-light/60 hover:text-primary transition-colors text-xl">
                            <i class="fa fa-discord"></i>
                        </a>
                    </div>
                </div>
                
                <!-- 快速链接 -->
                <div>
                    <h4 class="font-fantasy text-primary text-xl mb-6">快速链接</h4>
                    <ul class="space-y-3">
                        <li><a href="#classes" class="text-light/70 hover:text-primary transition-colors">职业</a></li>
                        <li><a href="#factions" class="text-light/70 hover:text-primary transition-colors">阵营</a></li>
                        <li><a href="#expansions" class="text-light/70 hover:text-primary transition-colors">资料片</a></li>
                        <li><a href="#media" class="text-light/70 hover:text-primary transition-colors">媒体</a></li>
                        <li><a href="#news" class="text-light/70 hover:text-primary transition-colors">新闻</a></li>
                        <li><a href="#" class="text-light/70 hover:text-primary transition-colors">支持</a></li>
                    </ul>
                </div>
                
                <!-- 资源 -->
                <div>
                    <h4 class="font-fantasy text-primary text-xl mb-6">资源</h4>
                    <ul class="space-y-3">
                        <li><a href="#" class="text-light/70 hover:text-primary transition-colors">游戏指南</a></li>
                        <li><a href="#" class="text-light/70 hover:text-primary transition-colors">社区论坛</a></li>
                        <li><a href="#" class="text-light/70 hover:text-primary transition-colors">开发者博客</a></li>
                        <li><a href="#" class="text-light/70 hover:text-primary transition-colors">API 文档</a></li>
                        <li><a href="#" class="text-light/70 hover:text-primary transition-colors">插件库</a></li>
                        <li><a href="#" class="text-light/70 hover:text-primary transition-colors">赛事信息</a></li>
                    </ul>
                </div>
                
                <!-- 订阅 -->
                <div>
                    <h4 class="font-fantasy text-primary text-xl mb-6">订阅最新资讯</h4>
                    <p class="text-light/70 mb-4">
                        获取游戏更新、活动预告和独家优惠信息
                    </p>
                    <form class="mb-4">
                        <div class="flex">
                            <input type="email" placeholder="你的邮箱地址" class="bg-dark/60 border border-primary/30 rounded-sm px-4 py-2 w-full focus:outline-none focus:border-primary text-light">
                            <button type="submit" class="bg-accent hover:bg-accent/80 text-white px-4 rounded-sm ml-2 transition-colors">
                                <i class="fa fa-paper-plane"></i>
                            </button>
                        </div>
                    </form>
                    <p class="text-light/50 text-sm">
                        订阅即表示您同意我们的隐私政策和服务条款
                    </p>
                </div>
            </div>
            
            <div class="border-t border-primary/20 pt-8">
                <div class="flex flex-col md:flex-row justify-between items-center">
                    <div class="text-light/50 text-sm mb-4 md:mb-0">
                        &copy; 2023 艾泽拉斯传奇 版权所有. 保留所有权利.
                    </div>
                    <div class="flex flex-wrap justify-center gap-4 text-sm">
                        <a href="#" class="text-light/50 hover:text-primary transition-colors">隐私政策</a>
                        <a href="#" class="text-light/50 hover:text-primary transition-colors">服务条款</a>
                        <a href="#" class="text-light/50 hover:text-primary transition-colors">Cookie 政策</a>
                        <a href="#" class="text-light/50 hover:text-primary transition-colors">家长指南</a>
                        <a href="#" class="text-light/50 hover:text-primary transition-colors">联系我们</a>
                    </div>
                </div>
            </div>
        </div>
    </footer>
    
    <!-- JavaScript -->
    <script>
        // 导航栏滚动效果
        const navbar = document.getElementById('navbar');
        window.addEventListener('scroll', () => {
            if (window.scrollY > 50) {
                navbar.classList.add('bg-dark/95', 'shadow-lg');
                navbar.classList.remove('bg-transparent');
            } else {
                navbar.classList.remove('bg-dark/95', 'shadow-lg');
                navbar.classList.add('bg-transparent');
            }
        });
        
        // 移动端菜单切换
        const menuToggle = document.getElementById('menu-toggle');
        const mobileMenu = document.getElementById('mobile-menu');
        
        menuToggle.addEventListener('click', () => {
            mobileMenu.classList.toggle('hidden');
            if (mobileMenu.classList.contains('hidden')) {
                menuToggle.innerHTML = '<i class="fa fa-bars"></i>';
            } else {
                menuToggle.innerHTML = '<i class="fa fa-times"></i>';
            }
        });
        
        // 滚动动画
        function revealElements() {
            const reveals = document.querySelectorAll('.reveal');
            
            for (let i = 0; i < reveals.length; i++) {
                const windowHeight = window.innerHeight;
                const elementTop = reveals[i].getBoundingClientRect().top;
                const elementVisible = 150;
                
                if (elementTop < windowHeight - elementVisible) {
                    reveals[i].classList.add('active');
                }
            }
        }
        
        window.addEventListener('scroll', revealElements);
        window.addEventListener('load', revealElements);
        
        // 平滑滚动
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();
                
                // 关闭移动菜单（如果打开）
                if (!mobileMenu.classList.contains('hidden')) {
                    mobileMenu.classList.add('hidden');
                    menuToggle.innerHTML = '<i class="fa fa-bars"></i>';
                }
                
                document.querySelector(this.getAttribute('href')).scrollIntoView({
                    behavior: 'smooth'
                });
            });
        });
    </script>
</body>
</html>
